import React from 'react';
import {Button, Icon} from 'antd';
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaTable} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';

// 手机图片元素
class Content_mobilePicture extends React.Component {
    state = {
        eScrollSpeed: this.props.eScrollSpeed,
        eImageSource: this.props.eImageSource
    };

    render() {
        const columns = [{
            title: getLabel(350, '图片'),
            dataIndex: 'src',
            width: '40%',
            render: (text, record) => (
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@f44uw2@${record.key}`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'src')}/>
            )
        }, {
            title: getLabel(22931, '图片名称'),
            dataIndex: 'title',
            width: '15%',
            render: (text, record) => (
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@0uxi2p@${record.key}`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'title')}/>
            )
        }, {
            title:getLabel(	22932, '图片链接') ,
            dataIndex: 'link',
            width: '25%',
            render: (text, record) => (
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@0008j4@${record.key}`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'link')}/>
            )
        }, {
            title: getLabel(88, '顺序'),
            dataIndex: 'orderNum',
            width: '10%',
            render: (text, record) => (
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@lp5my0@${record.key}`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'orderNum')}/>
            )
        }, {
            title: getLabel(30585, '操作') ,
            dataIndex: 'operation',
            width: '10%',
            render: (text, record) => (
                <span onClick={this.onDetailDelete.bind(this, record.key)}>{getLabel(91, '删除')}</span>
            )
        }];

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4elk4g`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@67qf0b`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@ulh10m`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ink47c`} label={getLabel(22927, "滚动速度")} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@hbqucu`} value={this.state.eScrollSpeed} style={{width: '100px'}} onChange={value => this.setState({eScrollSpeed: value})}/>
                    </WeaFormItem>
                </WeaSearchGroup>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@r66r36`}
                    title="图片来源"
                    needTigger={true}
                    showGroup={true}
                    customComponent={
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@emmt9j`} type="primary" style={{borderRadius: 0, padding: '0 4px'}} onClick={this.onDetailAdd.bind(this)}>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@h7gcca`} type="plus" style={{color: '#fff'}}/>
                        </Button>
                    }
                >
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@auai97`} columns={columns} dataSource={this.state.eImageSource} pagination={false}/>
                </WeaSearchGroup>
            </div>
        );
    }

    onDetailChange(key, type, value) {
        const {eImageSource} = this.state;
        eImageSource[key][type] = value;
        this.setState({eImageSource: eImageSource});
    }

    onDetailDelete(key) {
        const {eImageSource} = this.state;
        for (let i = 0, len = eImageSource.length; i < len; i++) {
            if (eImageSource[i].key == key) {
                eImageSource.splice(i, 1);
                break;
            }
        }
        this.setState({eImageSource: eImageSource});
    }

    onDetailAdd() {
        const {eImageSource} = this.state;
        eImageSource.push({key: eImageSource.length, src: '', title: '', link: '', orderNum: '0'});
        this.setState({eImageSource: eImageSource});
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentScrollSpeed: this.state.eScrollSpeed,
            eContentImageSource: this.state.eImageSource
        };
    }
}

export default Content_mobilePicture;
